<!-- 智能体选择 -->
<script setup lang="ts">
import Popover from '@/components/Popover/index.vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { useAppStore } from '@/stores/modules/app';
import { useAgentStore } from '@/stores/modules/agent';

const appStore = useAppStore();
const agentStore = useAgentStore();

onMounted(() => {
  // 如果没有当前智能体且有可用智能体，设置默认智能体
  if (!agentStore.currentAgent && appStore.agents && appStore.agents.length > 0) {
    agentStore.setCurrentAgent(appStore.agents[0]);
  }
});

const currentAgentName = computed(() => agentStore.currentAgent?.name || '选择智能体');
const agentList = computed(() => appStore.agents || []);

/* 弹出面板 开始 */
const popoverStyle = ref({
  width: '200px',
  padding: '4px',
  height: 'fit-content',
  background: 'var(--el-bg-color, #fff)',
  border: '1px solid var(--el-border-color-light)',
  borderRadius: '8px',
  boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
});
const popoverRef = ref();

// 点击选择智能体
function handleClick(item: any) {
  agentStore.setCurrentAgent(item);
  popoverRef.value?.hide?.();
  
  console.log('智能体已切换:', item);
}

// 暴露给父组件使用
defineExpose({
  currentAgent: agentStore.currentAgent,
  getCurrentAgent: () => agentStore.currentAgent
});
</script>

<template>
  <div class="agent-select">
    <Popover
      ref="popoverRef"
      placement="top-start"
      :offset="[4, 0]"
      popover-class="popover-content"
      :popover-style="popoverStyle"
      trigger="clickTarget"
    >
      <!-- 触发元素插槽 -->
      <template #trigger>
        <div
          class="agent-select-box select-none flex items-center gap-4px p-10px rounded-10px cursor-pointer font-size-12px"
        >
          <div class="agent-select-box-icon">
            <SvgIcon name="code" size="12" />
          </div>
          <div class="agent-select-box-text font-size-12px">
            {{ currentAgentName }}
          </div>
        </div>
      </template>

      <div class="popover-content-box">
        <div
          v-for="item in agentList"
          :key="item.id"
          class="popover-content-box-items w-full rounded-8px select-none transition-all transition-duration-300 flex items-center hover:cursor-pointer hover:bg-[rgba(0,0,0,.04)]"
        >
          <Popover
            trigger-class="popover-trigger-item-text"
            popover-class="rounded-tooltip"
            placement="right"
            trigger="hover"
            :offset="[12, 0]"
          >
            <template #trigger>
              <div
                class="popover-content-box-item p-4px font-size-12px text-overflow line-height-16px"
                :class="{ 'bg-[rgba(0,0,0,.04)] is-select': item.id === agentStore.currentAgent?.id }"
                @click="handleClick(item)"
              >
                {{ item.name }}
              </div>
            </template>
            <div
              class="popover-content-box-item-text text-wrap max-w-200px rounded-lg p-8px font-size-12px line-height-tight"
            >
              <div>地址: {{ item.addr }}</div>
              <div>创建时间: {{ item.createDate }}</div>
            </div>
          </Popover>
        </div>
      </div>
    </Popover>
  </div>
</template>

<style scoped lang="scss">
.agent-select-box {
  color: var(--el-color-success, #67c23a);
  background: var(--el-color-success-light-9, rgb(240 249 235));
  border: 1px solid var(--el-color-success, #67c23a);
  border-radius: 10px;
}
.popover-content-box-item.is-select {
  font-weight: 700;
  color: var(--el-color-success, #67c23a);
}
.popover-content-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 200px;
  overflow: hidden auto;
  .popover-content-box-items {
    :deep() {
      .popover-trigger-item-text {
        width: 100%;
      }
    }
  }
  .popover-content-box-item-text {
    color: white;
    background-color: black;
  }

  // 滚动条样式
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-track {
    background: #f5f5f5;
  }
  &::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 4px;
  }
}
</style>